<!--
 - Author : 003.
 - Date   : 2018/9/25.
 - File   : 查看
 -->

<template>
  <div class="page">
    <div class="page-title">
      <Row>
          <i-col :xs="24" :sm="12" :md="12" :lg="8">订单名称 : {{obj.orderName}}</i-col>
          <i-col :xs="24" :sm="12" :md="12" :lg="8">审核状态 : <span style="color:#5cadff;font-weight:bold;">{{obj.state | orderState}}</span></i-col>
      </Row>
      <div class="fixed-button"><i-button type="primary" size="large"  v-if="obj.state==='0'" @click="revoke">撤销</i-button></div>
      <div class="arrow-ico" @click="toggle">
        <Icon type="ios-arrow-down" v-show="!toggleTag"></Icon>
        <Icon type="ios-arrow-up" v-show="toggleTag"></Icon>
      </div>
      <div v-show="toggleTag">
        <Row>
          <i-col span="12">审核原因:{{obj.audit_desc}}</i-col>
        </Row>
        <Row>
          <i-col :xs="24" :sm="12" :md="12" :lg="6">
            车牌号：{{obj.plateNumber}}
          </i-col>
          <i-col :xs="24" :sm="12" :md="12" :lg="6">导游姓名：{{obj.guideName}} </i-col>
          <i-col :xs="24" :sm="12" :md="12" :lg="6">联系方式：{{obj.phone}} </i-col>
          <i-col :xs="24" :sm="12" :md="12" :lg="6">
            是否接受景区入园调整：
            <!-- <Checkbox :checked.sync="isAdjust"></Checkbox> -->
            <div :class="obj.isAdjust==='T'?'is-check checked':'is-check'"><Icon type="checkmark-round"></Icon></div>
            
          </i-col>
        </Row>
        <Row>
          <i-col :xs="24" :sm="12" :md="12" :lg="6">入园时间：{{obj.inTime}} </i-col>
          <i-col :xs="24" :sm="12" :md="12" :lg="6">
            入园通道：
            <!-- <Radio-group :model.sync="obj.inChannel">
              <Radio value="0">东门</Radio>
              <Radio value="1">西门</Radio>
            </Radio-group> -->
            <div :class="obj.inChannel==='0'?'is-check checked':'is-check'"><Icon type="checkmark-round"></Icon></div>东门
            <div :class="obj.inChannel==='1'?'is-check checked':'is-check'"><Icon type="checkmark-round"></Icon></div>西门
          </i-col>
          <i-col :xs="24" :sm="12" :md="12" :lg="6">拟抵达时间：{{obj.arriveTime}} </i-col>
        </Row>
        <Row>
          <i-col span="22">旅行社申请其他事项： {{obj.remark}} </i-col>
        </Row>
      </div>      
    </div>
    <div class="page-content">      
      <table class="table table-order table-order-hover">
        <thead>
        <tr>
          <th>姓名</th>
          <th>证件类型</th>
          <th>证件号码</th>
          <th>特殊证件</th>
          <th>联系电话</th>
          <th>系统审核</th>
          <th>出票类型</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(index,item) in orderList" :class="'color'+item.billType">
          <td>{{item.name}}</td>
          <td>{{item.papersType|papersType}}</td>
          <td>{{item.idCard}}</td>
          <td> {{item.specialPapersType|specialPapersType}} </td>
          <td>{{item.phone}}</td>
          <td>  
            <span v-if="item.specialPapersType&&item.billType==='1'">特殊证件</span>
            <span v-else>{{item.idCard|countYearsType}}</span>
          </td>
          <td>{{item.billType | billType}}</td>
        </tr>
        </tbody>
      </table>      
      <div class="page-footer" v-if="orderList.length  === 0">
        <div class="col-xs-12 no-data">
          {{nodataTxt}}
        </div>
      </div>
      <div class="fixed-ico" @click="back"><img src="../../assets/images/back-ico.png" alt=""></div>
    </div>
  </div>
</template>

<script>
  import {createTab} from '../../vuex/action';
  import {token, user} from '../../vuex/getter'
  import apiSource from '../../wohome-api'
  import {parseJSON, isSuccess} from '../../utils'
  import {isEmptyObject} from '../../utils/tool';
  import vMessage from '../../components/message';
  import vModal from '../../components/modal';

  export default {
    data() {
      return {
        toggleTag:false,
        obj:{},
        // remark:'',
        // plateNumber:'',
        // phone:'',
        isAdjust:true,//是否接受景区入园调整 T=接受 F=不接受
        // inTime:'',
        // inChannel:'',//入园通道 0=东门，1=西门 ,
        // arriveTime:'',
        // guideName:'',
        orderId: this.$route.query.orderId,
        reason:'',
        // orderName:'',
        // state: '',
        nodataTxt: '没有相关数据',
        orderList:[] 
      }
    },
    watch: {      
    },
    ready() {
      this.getOrderDetail()
    },
    methods: {
      toggle(){
        console.log('toggle')
        this.toggleTag=!this.toggleTag
      },
      getOrderDetail(){
        apiSource({
          type: 'outer',
          service: 'travelOrderDetail',
          ct: {orderId: this.orderId}
        }).then((res) => {
          console.log(res)
          this.obj=res
          // if(res.isAdjust==='T'){
          //   this.isAdjust=true
          // } else{
          //   this.isAdjust=false
          // }
          // this.orderName = res.orderName
          // this.state = res.state
          this.orderList=res.travel_order_passenger_list
        })
      },
      /**
       * 撤销
       */
      revoke(){
        var self=this
        vModal.confirm({
          title: '撤销',
          content: `确定撤销“${this.obj.orderName}”？`,
          onOk: function () {
            apiSource({
              type: 'outer',
              service: 'travelOrderUndo',
              ct: {orderId: self.orderId}
            }).then((res) => {
              console.log('撤销成功', res)
              if (isEmptyObject(res)) {
                vMessage.success('已撤销');
                self.back()
              }
            }, (e)=> {
              console.log(e);
            });
          }
        });
      },
      back(){
        window.history.go(-1);
      },
      doble(val){
        if (val < 10) {
          return '0' + val
        }else{
          return val
        }
      }
    },
    vuex: {
      getters: {token, user},
      actions: {
        createTab
      }
    },
  }

</script>

<style lang="less" scoped>
 @import "../../assets/less/common.less";
  .page{
    .ivu-radio-wrapper{
      font-size: 18px;
    }
    .fixed-button{      
      right: 80px;
      top: 17px;
    }
  }
</style>
